<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ideas</title>
    <link rel="stylesheet" href="idea.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> -->
  </head>

  <body>
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> -->

    <input type="checkbox" id="check" />
    <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
      <header>Time App</header>
      <ul>
        <li>
          <a href="../../Schedule/schedule.html"
            ><i class="fas fa-clock"></i>Schedule</a
          >
        </li>
        <li>
          <a href="../Music/music.html"><i class="fas fa-music"></i>Music</a>
        </li>
        <li>
          <a href="idea.html"><i class="fas fa-pen-nib"></i>Ideas</a>
        </li>
        <li>
          <a href="../../settings/settings.html"
            ><i class="fas fa-cog"></i>Settings</a
          >
        </li>
        <li>
          <a href="../../Report/report.html"
            ><i class="fas fa-calendar-week"></i>Reports</a
          >
        </li>
        <li>
          <a href="../../About/About.html"
            ><i class="far fa-question-circle"></i>Instructions</a
          >
        </li>
        <li>
          <a href="../../home/home.html"
            ><i class="fas fa-chevron-circle-left"></i>Home</a
          >
        </li>
      </ul>
    </div>

    <section>
      <div class="ideas_box">
        <h1 id="main_head">Ideas</h1>

        <form>
          <!-- <fieldset> -->
          <div class="tableContainer">
            <input placeholder="idea" id="htmlIdea" />
            <input
              type="button"
              class="btn btn-success"
              id="submit"
              value="ADD"
            />
          </div>
          <!-- </fieldset> -->
        </form>
        <div class="idea_list_box">
          <h1>Current Ideas List</h1>
          <div id="ideaList"></div>
        </div>
      </div>
    </section>

    <script src="idea.js"></script>
  </body>
</html>
